<template>
  <div class="index-container">
      <!-- 顶部条 -->
        <div class="topBar">
            <div class="logo"></div>
            <a class="location" href="" ><span>福州</span></a>
        </div>
        <Swiper></Swiper>
         <!-- 产品列表块 种类1 热销-->
        <div class="list">  
            <!-- 块标题 -->
            <div class="title flex-r-b">
                <h3 class="text">正在热销<span class="tip">HOT</span></h3>
                <a href="" class="more">更多</a>
            </div>
            <!-- 块内容 -->
            <div class="wrapper flex-r-b">
                <card1 @showSize='showSize(good)' v-for=" good in goodsList" :key='good.id' :data='good'/>
            </div>
        </div>
        <!-- 产品列表块 种类2 新品上市-->
        <div class="list">
            <!-- 块标题 -->
            <div class="title flex-r-b">
                <h3 class="text">新品上市
                    <span class="tip">SELL</span>
                </h3>
                <a href="" class="more">更多</a>
            </div>
            <!-- 块内容 -->
            <div class="wrapper flex-r-b">
                <Card2></Card2>
            </div>
        </div>

        <Navbar></Navbar>

        <SizeModual ref='size' :data='data'></SizeModual>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
import Swiper from "@/components/Swiper";
import Card1 from "@/components/Card1";
import Card2 from "@/components/Card2";
import Navbar from "@/components/Navbar"
import SizeModual from "@/components/SizeModual"
export default {
  components:{
      Swiper,
      Card1,
      Card2,
      Navbar,
      SizeModual
  },
  props:{},
  data(){
    return {
        data:{}
    }
  },
  created(){

  },
  mounted(){},
  computed:{
      ...mapGetters(['count']),
      ...mapState(['goodsList'])
  },
  methods:{
      showSize(data){
          this.data = data
          this.$refs.size.showAdd()
      }
  },
  watch:{},
}
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.index-container{
    min-height: 100%;
    padding: 1rem .2rem 1.5rem .2rem; 
    // 顶部
    .topBar {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding: .1rem .24rem;
        background: $c-ff;
        z-index: 99;
        .logo {
            text-align: center;
            font-family: "DaunPenh";
            color: $c-2a;
            font-size: .46rem;
            background: url("../../public/images/index/logo.png") no-repeat;
            background-position: center;
            height: .7rem;
            background-size: 1.4rem 0.3rem;
        }
        .location {
            position: absolute;
            right: .24rem;
            top: 0;
            height: 100%;
            line-height: .9rem;
            padding-right: .3rem;
            font-family: "PingFang SC Regular";
            color: $c-33;
            font-size: .24rem;
            background: url("../../public/images/index/icon_10.png") center right no-repeat;
            background-size: .24rem .3rem;
        }
    } 

     // 产品列表
    .list {
        margin-top: .5rem;
        .title {
            .text {
                position: relative;
                font-family: "PingFang SC Bold";
                font-size: .34rem;
                color: $c-33;
                .tip {
                    position: absolute;
                    left: 100%;
                    bottom: 1px;
                    margin-left: .12rem;
                    font-family: "PingFang-SC-Medium";
                    font-size: .22rem;
                    color: $c-b1aea9;
                    font-weight: normal;
                }
            }
            .more {
                display: block;
                padding: 0 .2rem;
                background: url("../../public/images/index/icon_9.png") center right no-repeat;
                background-size: .1rem .18rem;
                font-family: "PingFang SC regular";
                font-size: .24rem;
                color: $c-99;
                transform: translateY(0.07rem);
            }
        }
        .wrapper{
            flex-wrap: wrap;
        }
    } 
    
}
</style>